<template>
  <div class="fileList">
    <div style="padding:10px;margin: 6px 10px 0;">
      <SearchComponent :searchConfig="fileListSearchConfig" @resetFn="reset" @searchFn="queryFn">
        <template #Biz>
          <el-select v-model="selectBizId" placeholder="业务" style="width: 100%">
            <el-option v-for="item in bizOptions" :key="item.bizId" :label="item.bizName" :value="item.bizId" />
          </el-select>
        </template>
        <template #SubBiz>
          <el-select v-model="selectSubBizId" placeholder="子业务" style="width: 100%">
            <el-option v-for="item in subBizOptions" :key="item.subBizId" :label="item.subBizName"
              :value="item.subBizId" />
          </el-select>
        </template>
      </SearchComponent>
    </div>

    <div class="content">
      <div class="">
        <div class="uploadFileContent">
          <el-button size="small" type="primary" v-if="!!btnPermission['FileList-uploadFileFn']"
          :disabled="!btnPermission['FileList-uploadFileFn']" @click="openUploadFileDialog">上传文件
          </el-button>
        </div>
        <TableComponent v-loading="isLoading" :assetList="tableDataList" :tableColumns="tableColumns"
          element-loading-text="加载中...">
          <template #createTime="{row}">
            <span>{{ tableDateFormat(row.createTime) }}</span>
          </template>
          <template #operation="{ row }">
            <el-button size="small" type="text">
              <a :href="row.tosPath" :download="row.fileName" style="color: #409EFF;">下载</a>
            </el-button>
            <el-popconfirm title="确定要删除吗?" @confirm='deleteFn(row)'>
              <template #reference>
                <el-button size="small" style="color:#f00;" type="text">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </TableComponent>
        <el-pagination style="margin-top: 20px;float: right" background layout="total, prev, pager, next" :total="pageData.total"
          :currentPage="pageData.current" :page-size="pageData.size" @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>
    <UploadCdnFile ref="UploadCdnFileRef" :bizOptions="bizOptions" @feedbackFn="getPageData"></UploadCdnFile>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, computed } from 'vue';
import SearchComponent from '@/components/SearchComponent.vue';
import UploadCdnFile from './components/UploadCdnFile.vue';
import { fileListSearchConfig } from '@/constant/config.js';
import { queryBizList, querySubBizList, queryFileByPage, deleteApi } from '@/api/fileListApi.js';
import TableComponent from '@/components/TableComponent.vue';
import { tableColumns } from '@/constant/fileList.js';
import { unixTimestamp } from '@/utils/util.js';
import { ElMessage } from 'element-plus';
import {useStore} from 'vuex';

const store = useStore();
const btnPermission = computed(() => store.state.btnPermission);
const UploadCdnFileRef = ref(null)
const selectBizId = ref(null)
const selectSubBizId = ref(null)
const bizOptions = ref([])
const subBizOptions = ref([])
const tableDataList = ref([])
const isLoading = ref(false)
const pageData = reactive({
  total: 0,
  current: 1,
  size: 10
})

watch(selectBizId, (newVal) => {
  if (!newVal) {
    subBizOptions.value = []
  } else {
    selectSubBizId.value = null
    getSubBizList(newVal)
  }
});

const reset = () => {
  selectBizId.value = null;
  selectSubBizId.value = null;
  getPageData()
};

const queryFn = () => {
  getPageData()
};
// 查询业务的下拉选项
const getBizList = () => {
  queryBizList().then((res) => {
    if (res.data.code === 200) {
      let response = res.data.data;
      bizOptions.value = response;
    }
  })
};
// 查询子业务的下拉选项
const getSubBizList = (bizId) => {
  querySubBizList(bizId).then((res) => {
    if (res.data.code === 200) {
      let response = res.data.data;
      subBizOptions.value = response;
    }
  })
};
// 获取列表接口
const getPageData = (size = 10) => {
  isLoading.value = true
  queryFileByPage({
    current: pageData.current,
    szie: size,
    bizId: selectBizId.value,
    subBizId: selectSubBizId.value
  }).then(res => {
    if (res.data.code === 200) {
      tableDataList.value = res.data.data.records;
      pageData.total = res.data.data.total;
      isLoading.value = false
    }
  })
};
const handlePageChange = (val) => {
  pageData.current = val;
  getPageData();
};
// 上传窗口
const openUploadFileDialog = () => {
  UploadCdnFileRef.value.switchVisible()
};
// 删除文件
const deleteFn = (row) => {
  deleteApi({
    id: row.id
  }).then(res => {
    if (res.data.code === 200) {
      ElMessage({
        type:'success',
        message: '删除成功'
      })
      getPageData()
    }else{
      ElMessage({
        type:'error',
        message: '删除失败'
      })
    }
  })
};
// 创建时间的格式转换
const tableDateFormat = (timestamp) => {
    return unixTimestamp(timestamp)
}

onMounted(() => {
  pageData.current = 1;
  getBizList()
  getPageData()
})
</script>
<style lang="less" scoped>
.fileList {
  .content {
    padding: 0 20px;

    .uploadFileContent {
      margin: 0 0 10px;
    }
  }
}
</style>